import React, { Component } from 'react'
import ChildClickCounter from './ChildClickCounter'

export default class ParentClickContainer extends Component {
  
  state={
    showChild:false,
    name:""
  }
  
  f1 = (e)=>{
    //setState函数 会实现 1.更新state属性,2.更新页面
    //其中更新页面操作 会修改虚拟Dom树 并可能触发 差异更新到真实Dom树的操作
    //这种操作可能非常耗时,所以setState方法被设置为了异步的操作
    //因此,调用完成后,后续代码无法访问最新的值
    //如果想要看到最新值,可以在setState中设置回调函数,通过回调函数来处理数据更新后的结果
    this.setState({
      name:e.target.value
    },()=>{
      console.log(this.state.name)
    })
    //console.log(this.state.name)
  }

  render() {
    return (
      <div style={{padding:"10px",backgroundColor:"#cfc",border:"1px solid #009900"}}>
        <input type="text" size={12} placeholder='请输入您的姓名' onChange={this.f1}/> 
        欢迎回来! {this.state.name}!
        <hr/>

        <h3>ClickContainer父组件</h3>
        <button onClick={()=>{this.setState({showChild:!this.state.showChild})}}>
          隐藏显示子组件
        </button>

        {/*控制是否显示*/}
        <div style={{display:this.state.showChild ? "block" : "none"}}>
          <ChildClickCounter/>
        </div>
        {/*控制是否存在,相当于vue中的v-if*/}
        {this.state.showChild && <ChildClickCounter/>}
      </div>
    )
  }
}
